{% extends "datapanel/base.html" %}
{% block content %}
{% load static %}
{% comment %} load my filters {% endcomment %}
{% load concat_string %}
<div class="container">
    <div class="py-5 text-center">
        <img class="d-block mx-auto mb-4 img-product" src="{% static product.image_path %}" alt="{{ product.short_name }} width="220px" height="200px" >
        <h2>商品详情</h2>
        <p class="lead">{{ product.name }}</p>
    </div>
    <div class="d-flex">
        <table class="table table-striped align-top">
            <tbody>
                <tr>
                    <th class="col-md-2 col-lg-1">搜索类别</th>
                    <td class="col-lg-7" colspan="3">{{ product.short_name }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">Amazon标识码</th>
                    <td class="col-lg-7" colspan="3">{{ product.asin }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">商品价格</th>
                    <td class="col-lg-7" colspan="3">{{ product.price|concat_string:product.currency }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">品牌</th>
                    <td class="col-lg-7" colspan="3">{{ product.brand }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">卖家</th>
                    <td class="col-lg-7" colspan="3">{{ product.seller }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">最近1月销量</th>
                    <td class="col-lg-7" colspan="3">{{ product.bought_last_month }}</td>
                <tr>
                    <th class="col-md-2 col-lg-1">排名情况</th>
                    <td class="col-lg-7" colspan="3">{{ product.seller_rank }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">用户评论数</th>
                    <td class="col-lg-7" colspan="3">{{ product.reviews }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">评论星级</th>
                    <td class="col-lg-7" colspan="3">{{ product.reviews_count }}</td>
                </tr>                
                <tr>
                    <th class="col-md-2 col-lg-1">接口技术</th>
                    <td class="col-lg-3">{{ product.conn_tech }}</td>
                    <td class="col-lg-1">接口类型</td>
                    <td class="col-lg-3">{{ product.connector_type }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">端口数</th>
                    <td class="col-lg-3">{{ product.ports }}</td>
                    <td class="col-lg-1">快充支持</td>
                    <td class="col-lg-3">{{ product.fast_charge }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">输出电压</th>
                    <td class="col-lg-3">{{ product.voltage }}</td>
                    <td class="col-lg-1">功率</td>
                    <td class="col-lg-3">{{ product.wattage }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">兼容手机</th>
                    <td class="col-lg-7" colspan="3">{{ product.compatiable_phones }}</td>
                </tr> 
                <tr>
                    <th class="col-md-2 col-lg-1">兼容设备</th>
                    <td class="col-lg-7" colspan="3">{{ product.compatible_devices }}</td>
                </tr> 
                <tr>
                    <th class="col-md-2 col-lg-1">产品特性</th>
                    <td class="col-lg-7" colspan="3">{{ product.features }}</td>
                </tr> 
                <tr>
                    <th class="col-md-2 col-lg-1">采集时间</th>
                    <td class="col-lg-7" colspan="3">{{ product.create_time|date:"Y-m-d H:i:s" }}</td>
                </tr>
                <tr>
                    <th class="col-md-2 col-lg-1">产品链接</th>
                    <td class="col-lg-7" colspan="3"><a href="{{ product.url }}">点击跳转至亚马逊产品页面</a></td>
                </tr> 
            </tbody>
        </table>
    </div>
</div>
{% endblock content %}
